<template>
  <div style="color:#fff !important;">
    <el-dialog
      :title="
        '尊敬的' +
          (info.expert_name ? info.expert_name : info.judges_name) +
          (role === '专家' ? '教授' : '领导')
      "
      :visible.sync="dialogVisible"
      custom-class="custom-dialog"
      @close="close"
    >
      <!-- <div class="bg" style="position:absolute;width:50vw;height:50vw;background:red;left:50%;top:50%;transform:translate(-50%.-50%)">
    呵呵哈哈哈或
  </div> -->
      <div>
        <div class="content-wrap">
          <div v-if="role === '专家'" class="content">
            您好！西南交通大学拟引进{{ info.personnel.subject }}{{
              info.personnel.name
            }}专家（点击左侧菜单栏查看申报材料）全职到校工作，拟聘岗位：<span>{{ info.personnel.apply_post }}</span>，根据学校人才引进相关办法；
            学校启动进人才学术评价工作，现诚挚邀请您担任评审专家，帮助学校引引进人才把关。<span>请在相应“○”点选（均为单选、必选）</span>，于<span>5日</span>
            内提交评审意见。同时，请您填写银行账户等信息，近期我们将评审费发放至您的银行卡，请注意查收。此项工作为双向保密工作，请您理解并支持。
          </div>
          <!-- {{info.personnel.apply_college}} -->
          <div v-if="role === '评委'" class="content">
            您好！学校{{ info.personnel.apply_college }}
            拟引进<span>{{ info.personnel.subject }}</span><span>{{ info.personnel.name }}</span>教授全职到校工作，拟聘岗位：<span>{{ info.personnel.apply_post }}</span>。学院教授委员会对其学术水平、科研能力、发展潜力以及与岗位要求的适应性进行综合评价，学院党委对其进行政治把关初审，党政联席会研究同意引进。
            根据学校人才引进相关办法，学校以学科建设、岗位需求、培养创新人才为导向，充分考虑{{ info.personnel.apply_college }}
            学科建设，组织{{ info.personnel.expert_name }}等<span>{{
              info.count_ao
            }}</span>名专家进行“小同行”通信评审，通过对其科研与学术水平、创新与发展潜力、竞争力与社会影响力等进行学术评价；<span>{{ info.count_to }}</span>名专家建议引进。
            现呈请学校人才引进评审委员会成员审定，请您在相应“○”打“√”，于<span>5日</span>内提交。此项工作为双向保密，请您理解并支持。
          </div>
          <div class="thank">感谢您对学校人才工作的大力支持！</div>
          <div class="date-wrap">
            <div class="box">
              <div class="title">西南交通大学人才工作办公室</div>
              <div class="date">
                {{ info.time }}
              </div>
            </div>
          </div>
          <div class="dia-btn" @click="open">进入评审</div>
        </div>
      </div>

    <!-- <span>这是一段信息</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span> -->
    </el-dialog>
  </div>

</template>
<script>
import { getWelcome, getJudgesWelcome } from '@/api/user'
export default {
  data () {
    return {
      dialogVisible: false,
      dateStr: '',
      info: {},
      role: localStorage.getItem('role')
    }
  },
  created () {
    const date = new Date()
    this.dateStr = `${date.getFullYear()}年${
      date.getMonth() + 1
    }月${date.getDate()}日`
    if (this.role === '专家') {
      this.getWelcome()
    } else {
      this.getJudgesWelcome()
    }
  },
  methods: {
    async getWelcome () {
      const res = await getWelcome()
      this.info = res.data
      if (!this.info.personnel) {
        this.dialogVisible = false
        return
      }
      this.dialogVisible = true

      console.log(res)
    },
    async getJudgesWelcome () {
      const res = await getJudgesWelcome()
      this.info = res.data
      console.log(this.info)
      if (!this.info.personnel) {
        this.dialogVisible = false
        return
      }
      this.dialogVisible = true
    },
    open () {
      this.$emit('open', this.info.personnel.id)
      this.dialogVisible = false
    },
    close () {
      sessionStorage.setItem('show', true)
    }
  }
}
</script>
<style lang="scss" >
  ::v-deep.el-dialog__header{
    border-radius: .5vw .5vw 0 0;

    background: #1b499e;
  }
  ::v-deep.el-dialog__body{
    border-radius:0 0 .5vw .5vw;

    background: #1b499e;
  }
  .el-dialog__title{
    color: #fff !important;
    font-size: 1.5em;
  }
.content-wrap {

  position: relative;
  height: 50vh;
  font-size: 1.3em;
  font-family: MicrosoftYaHei;
  font-weight: 500;
  color: #fff;
    // background: red;

  .content {
    // background: red;

    padding: 0 40px;
    line-height: 40px;
    text-indent: 30px;
  }
  .thank {

    margin-left: 80px;
    margin-top: 39px;
  }
  .date-wrap {

    position: absolute;
    right: 50px;
    bottom: 0;
    width: 304px;
    height: 80px;
    div {
      text-align: center;
      margin-bottom: 14px;
    }
  }
}
.custom-dialog {
  background: rgba($color: #1b499e, $alpha: 1);
  background-image: url('../../../../../public/1.png');
  background-repeat:no-repeat;
  background-position: 70% 15%;
  background-size: 170%;
  padding: .5vw;
  color: #fff !important;
  border-radius: 20px !important;
}
::v-deep.el-dialog {
  background: transparent;
  border-radius: 20px !important;
}
.dia-btn {
  position: absolute;
  left: 50%;
  bottom: -130px;
  transform: translateX(-50%);
  width: 350px;
  height: 70px;
  line-height: 70px;
  background: #f7992a;
  border-radius: 35px;

  font-size: 24px;
  text-align: center;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: #ffffff;
  cursor: pointer;
}
.font {
  font-weight: 800;
  color: red;
}
</style>
